<template>
  <div class="home ">
    <div class="nav">
      <Nav/>
    </div>
    <Banner />
    <div class="con xbx">
      <div class="con-l">
        <Title title="热门推荐" />
        <HostList />
        <Title title="新碟上架" />
        <NewDie />
        <Title title="榜单" />
        <Bangdang />
      </div>
      <div class="con-r">
        <Smalltitle />
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "@/components/Banner.vue";
import Title from "@/components/Title.vue";
import HostList from "@/components/home/HostList.vue";
import NewDie from "@/components/home/NewDie.vue";
import Bangdang from "@/components/home/Bangdang.vue";
import Smalltitle from "@/components/home/Smalltitle.vue";
import Nav from '@/components/Nav.vue'
export default {
  name: "Home",
  components: {
    Banner,
    Title,
    HostList,
    NewDie,
    Bangdang,
    Smalltitle,
    Nav
  },
};
</script>
<style lang="less">
@import "../assets/base.less";
.con {
  display: flex;
  background-color: #fff;
  .con-l {
    width: 732px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 20px;
  }
  .con-r {
    width: 250px;
    border: 1px solid #ccc;
  }
}
</style>
